// SPDX-License-Identifier: MIT

@use "../settings/config" as cfg;
@use "sass:math";

$color-picker-rect-size:   8px !default;
$color-button-bg-selected: if(cfg.$darkMode, -color-base-6, -color-base-1) !default;

.html-editor {
  -fx-background-color: -color-border-default, -color-bg-default;
  -fx-background-insets: 0, cfg.$border-width;
  -fx-padding: calc(cfg.$border-width + 1px);

  &:contains-focus {
    -fx-background-color: -color-accent-emphasis, -color-bg-default;
  }

  .tool-bar {
    -fx-padding: 4px;
  }

  .button,
  .toggle-button {
    -fx-background-insets: 0;
  }

  .toggle-button {
    -color-button-bg-selected: $color-button-bg-selected;
    -color-button-border-focused: transparent;
  }
}

.color-picker {
  &.html-editor-foreground {
    -fx-color-rect-x: 0;
    -fx-color-rect-y: -#{math.div($color-picker-rect-size, 2)};
    -fx-color-rect-width: $color-picker-rect-size;
    -fx-color-rect-height: $color-picker-rect-size;
    -fx-color-label-visible: false;
  }

  &.html-editor-background {
    -fx-color-rect-x: 0;
    -fx-color-rect-y: -#{math.div($color-picker-rect-size, 2)};
    -fx-color-rect-width: $color-picker-rect-size;
    -fx-color-rect-height: $color-picker-rect-size;
    -fx-color-label-visible: false;
  }

  &.html-editor-foreground>.color-picker-label>.picker-color>.picker-color-rect,
  &.html-editor-background>.color-picker-label>.picker-color>.picker-color-rect {
    -fx-stroke: none;
  }
}

// JavaFX doesn't export (open) Modena resources package, so the below links won't work.
// Because of AtlantaFX themes are also distributed as single CSS files, it can't be fixed here.
// You can copy Modena resources and override those URLs in your app CSS to tackle the problem
// or better use TinyMCE or any other modern JS WYSIWYG editor instead of this legacy control.
$image-path: "/com/sun/javafx/scene/control/skin/modena" !default;

.color-picker.html-editor-foreground {
  -fx-graphic: url("#{$image-path}/HTMLEditor-Text-Color.png");
}

.color-picker.html-editor-background {
  -fx-graphic: url("#{$image-path}/HTMLEditor-Background-Color.png");
}

.html-editor-cut {
  -fx-graphic: url("#{$image-path}/HTMLEditor-Cut.png");
}

.html-editor-copy {
  -fx-graphic: url("#{$image-path}/HTMLEditor-Copy.png");
}

.html-editor-paste {
  -fx-graphic: url("#{$image-path}/HTMLEditor-Paste.png");
}

.html-editor-align-left {
  -fx-graphic: url("#{$image-path}/HTMLEditor-Left.png");
}

.html-editor-align-center {
  -fx-graphic: url("#{$image-path}/HTMLEditor-Center.png");
}

.html-editor-align-right {
  -fx-graphic: url("#{$image-path}/HTMLEditor-Right.png");
}

.html-editor-align-justify {
  -fx-graphic: url("#{$image-path}/HTMLEditor-Justify.png");
}

.html-editor-outdent {
  -fx-graphic: url("#{$image-path}/HTMLEditor-Outdent.png");
}

.html-editor-outdent:dir(rtl) {
  -fx-graphic: url("#{$image-path}/HTMLEditor-Outdent-rtl.png");
}

.html-editor-indent {
  -fx-graphic: url("#{$image-path}/HTMLEditor-Indent.png");
}

.html-editor-indent:dir(rtl) {
  -fx-graphic: url("#{$image-path}/HTMLEditor-Indent-rtl.png");
}

.html-editor-bullets {
  -fx-graphic: url("#{$image-path}/HTMLEditor-Bullets.png");
}

.html-editor-bullets:dir(rtl) {
  -fx-graphic: url("#{$image-path}/HTMLEditor-Bullets-rtl.png");
}

.html-editor-numbers {
  -fx-graphic: url("#{$image-path}/HTMLEditor-Numbered.png");
}

.html-editor-numbers:dir(rtl) {
  -fx-graphic: url("#{$image-path}/HTMLEditor-Numbered-rtl.png");
}

.html-editor-bold {
  -fx-graphic: url("#{$image-path}/HTMLEditor-Bold.png");
}

.html-editor-italic {
  -fx-graphic: url("#{$image-path}/HTMLEditor-Italic.png");
}

.html-editor-underline {
  -fx-graphic: url("#{$image-path}/HTMLEditor-Underline.png");
}

.html-editor-strike {
  -fx-graphic: url("#{$image-path}/HTMLEditor-Strikethrough.png");
}

.html-editor-hr {
  -fx-graphic: url("#{$image-path}/HTMLEditor-Break.png");
}
